<template>
  <div class="home" v-back="color">
     <!-- <button v-back="'red'" @click="cutColor('red')">红色</button>
     <button v-back="'green'" @click="cutColor('green')">绿色</button> -->
     <button @click="cutColor('red')">红色</button>
     <button @click="cutColor('green')">绿色</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref } from 'vue';
export default {
  name: 'Home',
  components: {

  },
  // directives:{ // 自定义指令
  //   back:{
  //     updated(el,binding){
  //       console.log(el);
  //       console.log(binding);
  //       el.style.background = binding.value
  //     }
  //   }
  // },
  setup(props) {
    const color = ref(null);
    const cutColor = (val) => {
       color.value = val;
    }
    return{
      cutColor,
      color
    }
  }
}
</script>
<style lang="scss">
   .home{
     height: 100vh;
   }
</style>